<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器实现</title>
    <style type="text/css">
        .frame {
            width: 560px;
            height: 260px;
            border: 2px solid black;
            /* 设置边框*/
            border-radius: 10px;
            /* 圆角效果*/
        }

        .calculatorStyle {
            font-size: 30px;
            position: absolute;
            letter-spacing: 50px;
            top: 5px;
            left: 180px;
        }

        .theFormStyle {
            position: absolute;
            top: 80px;
            left: 180px;

        }

        .inputBox {
            width: 180px;
            height: 40px;
            border: 1px solid black;
            border-radius: 5px;
        }

        .empty {
            border: none;
            font-size: 25px;
            font-weight: bold;
            color: brown;
        }

        .tableStyle {
            width: 250px;
            height: 100px;
            position: absolute;
            left: 20px;
            top: 160px;
            text-align: center;
            /*    字体居中 */
        }

        .tableTwoStyle {
            width: 240px;
            height: 100px;
            position: absolute;
            left: 300px;
            top: 160px;
            text-align: center;
            font-size: 30px;
        }

        input {
            font-size: 20px;
            height: 40px;
            width: 40px;
            border: 2px solid black;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<script>
    onload = function () {
        // 页面加载完成的操作
        MyCalculator();
    }

    function MyCalculator() {
        // TODO 我的计算器
        // 给所有input注册事件
        let elementsByTagName = document.getElementsByTagName("input");
        // 获取所有的input标签
        let elementsByTagNameText = elementsByTagName[0];
        // 第一个就是text类型的input

        let element1, element2, result,operator;
        // 定义变量记录第一个因子，第二个因子，结果，运算符
        for (let i = 1; i < elementsByTagName.length; i++) {
            // 从1开始 循环遍历
            let elementsByTagNameElement = elementsByTagName[i];
            // 获取每个input标签
            elementsByTagNameElement.onclick = function () {
                if (elementsByTagNameElement.type === "button") {
                    // 如果是button类型
                    let value = elementsByTagNameElement.value;
                    // 提取出input类型的button的值
                    if (value >= 0 && value <= 9 || value === ".") {
                        // 如果是0-9 或者是  . ，添加事件
                        elementsByTagNameText.value += value;
                        // 把value加入到输入框
                    } else if (value === "+" || value === "*" || value === "-" || value === "/") {
                        // 如果是 + - * /
                        element1=elementsByTagNameText.value;
                        // 第一个结果赋给因子1
                        operator=value;
                        // 记录运算符

                    } else if (value === "清空") {
                        // 如果value是清空，则设置输入框为空
                        elementsByTagNameText.value = 0;
                    }
                }
            }

        }
    }
</script>
<div class="frame">
    <h2 class="calculatorStyle">计算器</h2>
    <form action="#" class="theFormStyle">
        <label>
            <input type="text" class="inputBox" value="0">
        </label>
        <input type="button" value="清空" class="empty" style="width: 90px">
    </form>
    <table class="tableStyle">
        <tr>
            <td><input type="button" value="1"></td>
            <td><input type="button" value="2"></td>
            <td><input type="button" value="3"></td>
            <td><input type="button" value="4"></td>
            <td><input type="button" value="5"></td>
        </tr>
        <tr>
            <td><input type="button" value="6"></td>
            <td><input type="button" value="7"></td>
            <td><input type="button" value="8"></td>
            <td><input type="button" value="9"></td>
            <td><input type="button" value="0"></td>
        </tr>
    </table>
    <table class="tableTwoStyle">
        <tr>
            <td><input type="button" value="+"></td>
            <td><input type="button" value="-"></td>
            <td><input type="button" value="*"></td>
        </tr>
        <tr>
            <td><input type="button" value="/"></td>
            <td><input type="button" value="."></td>
            <td><input type="button" value="="></td>
        </tr>
    </table>
</div>
</body>
</html>